<template>
	<view class="">
		<view class="eqList-box">
			<view class="eqList" v-for="eq in eqDataList" :key="eq.id">
				<view class="title">
					<view class="name">
						{{eq.partNum}}-{{eq.partName}}
					</view>
				</view>
				<view class="info">
					<image :src="eq.picture||'../../../static/images/index/weibaorenwu.png'" mode=""></image>
					<view class="text">
						<view class="right-info">
							<view class="info-name">
								备件类型:
							</view>
							<view class="info-text">
								{{eq.partTypeName}}
							</view>
						</view>
						<view class="right-info">
							<view class="info-name">
								实际库存:
							</view>
							<view class="info-text">
								{{eq.realStock}}
							</view>;
							<view class="info-name">
								最低安全库存:
							</view>
							<view class="info-text">
								{{eq.safeStock}}
							</view>
						</view>
						<view class="right-info">
							<view class="info-name">
								预警通知人:
							</view>
							<view class="info-text">
								{{eq.noticeUserName}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore v-if="total>5" :status="status" :line="true" />
			<view class="empty-data" v-if="eqDataList.length==0">
				<u-empty mode="data" :marginTop="100"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				eqDataList: [],
				params: {
					pn: 1,
					ps: 5
				},
				pages: 1,
				total: 0,
				status: 'loadmore',

			}
		},
		onLoad() {
			this.getListWarning()
		},
		//下拉加载更多
		onReachBottom() {
			if (this.params.pn >= this.pages) return;
			this.status = 'loading';
			this.params.pn = ++this.params.pn;
			setTimeout(() => {
				this.getListWarning()
				if (this.params.pn >= this.pages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		},
		methods: {
			//获取列表
			getListWarning() {
				uni.$u.http.post(`/device/mobile/devicePart/pageListWarning`, this.params).then(res => {
					if (res.code == 0) {
						this.eqDataList = this.eqDataList.concat(res.data.records);
						this.pages = res.data.pages;
						this.total = res.data.total;
					}
				}).catch(err => {
					uni.$u.toast(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 242, 242, 1);
	}

	.eqList-box {

		.eqList {
			padding: 32rpx;
			background-color: #fff;
			border-top: 1px solid rgba(242, 242, 242, 1);

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;

				.name {
					width: 560rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					text-align: left;
					font-size: 32rpx;
				}

				.type {
					width: 96rpx;
					height: 48rpx;
					text-align: center;
					line-height: 48rpx;
					font-size: 28rpx;
				}

				.use-type {
					color: rgba(2, 173, 130, 1);
					border-radius: 4px;
					background: rgba(2, 173, 130, 0.2);
				}

				.wx-type {
					border-radius: 4px;
					background: rgba(252, 119, 10, 0.2);
					color: rgba(252, 119, 10, 1);
				}

				.wb-type {
					border-radius: 4px;
					background: rgba(6, 130, 212, 0.2);
					color: rgba(6, 130, 212, 1);
				}

				.dj-type {
					border-radius: 4px;
					background: rgba(25, 98, 224, 0.2);
					color: rgba(25, 98, 224, 1);
				}
			}

			.info {
				display: flex;
				border-top: 1px solid rgba(242, 242, 242, 1);
				padding-top: 24rpx;

				image {
					width: 152rpx;
					height: 152rpx;
					border-radius: 16rpx;
				}

				.text {
					padding-left: 24rpx;

					.right-info {
						height: 48rpx;
						display: flex;
						align-items: center;
						justify-content: start;

						.info-name {
							font-size: 28rpx;
							color: rgba(140, 140, 140, 1);
						}

						.info-text {
							font-size: 28rpx;
							color: rgba(43, 43, 43, 1);
							max-width: 360rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							margin-right: 10rpx;
						}
					}
				}
			}
		}
	}
</style>